<template>
  <div v-for="comment in comments" :key="comment.id" class="comment-child">
    <!-- 评论元信息 -->
    <div class="comment-meta">
      <img :src="comment.filePath" alt="用户头像" />
      <span>用户：{{ comment.username || '匿名用户' }}</span>
      <span
        >评分：{{
          Array(comment.score)
            .fill(0)
            .map(() => '★')
            .join('')
        }}</span
      >
      <span>时间：{{ formatTime(comment.updateTime) }}</span>
    </div>

    <!-- 评论内容 -->
    <div class="comment-content">
      {{ comment.content }}

      <!-- 评论图片展示区域 -->
      <div class="comment-images" v-if="comment.images && comment.images.length">
        <!-- <img
          v-for="(img, index) in comment.images"
          :key="index"
          :src="img"
          :alt="`评论图片 ${index + 1}`"
          class="comment-img"
        /> -->
        <img
          :src="comment.images"
          :alt="`评论图片`"
          class="comment-img"
        />
      </div>
    </div>

    <!-- 操作链接 -->
    <div class="comment-actions">
      <span
        v-if="currentUser.userId !== comment.userId"
        @click="$emit('reply', comment.id)"
        class="action-link reply-link"
      >
        回复
      </span>
      <template v-if="currentUser.userId === comment.userId">
        <span @click="$emit('edit', comment.id)" class="action-link edit-link"> 修改 </span>
        <span @click="$emit('delete', comment.id)" class="action-link delete-link"> 删除 </span>
      </template>
    </div>

    <!-- 嵌套子评论 -->
    <template v-if="Array.isArray(comment.children) && comment.children.length > 0">
      <div class="toggle-children" @click="toggleCollapse(comment)">
        {{ comment.isCollapsed ? '展开' : '收起' }} {{ comment.children.length }} 条回复
      </div>

      <div class="comment-children" v-if="!comment.isCollapsed">
        <CommentComponent
          :comments="comment.children"
          :current-user="currentUser"
          @reply="$emit('reply', $event)"
          @edit="$emit('edit', $event)"
          @delete="$emit('delete', $event)"
        />
      </div>
    </template>
  </div>
</template>

<script setup>
import { defineProps, defineEmits, onMounted } from 'vue'

const props = defineProps({
  comments: { type: Array, required: true },
  currentUser: { type: Object, required: true },
})
const emit = defineEmits(['reply', 'edit', 'delete'])

// 初始化评论的折叠状态
onMounted(() => {
  props.comments.forEach((comment) => {
    if (!Object.prototype.hasOwnProperty.call(comment, 'isCollapsed')) {
      comment.isCollapsed = true
    }
  })
})

// 切换评论折叠/展开状态
const toggleCollapse = (comment) => {
  comment.isCollapsed = !comment.isCollapsed
}

// 时间格式化函数
const formatTime = (timeStr) => {
  if (!timeStr) return ''
  const date = new Date(timeStr)
  return `${date.getFullYear()}-${(date.getMonth() + 1).toString().padStart(2, '0')}-${date.getDate().toString().padStart(2, '0')} ${date.getHours().toString().padStart(2, '0')}:${date.getMinutes().toString().padStart(2, '0')}`
}
</script>

<style scoped>
/* 评论列表样式 */
.comment-list {
  margin-top: 16px;
}

.comment-child {
  border: 1px solid #eee;
  padding: 16px;
  margin: 12px 0;
  border-radius: 8px;
  transition: box-shadow 0.3s;
}

.comment-child:hover {
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.05);
}

.comment-meta {
  font-size: 14px;
  color: #666;
  margin-bottom: 12px;
  display: flex;
  gap: 20px;
  flex-wrap: wrap;
  align-items: center;
}

.comment-meta img {
  width: 32px;
  height: 32px;
  border-radius: 50%;
  object-fit: cover;
}

.comment-meta span {
  display: flex;
  align-items: center;
}

.comment-content {
  margin-bottom: 16px;
  line-height: 1.6;
  font-size: 15px;
  color: #333;
}

/* 评论图片样式 */
.comment-images {
  margin-top: 12px;
  display: flex;
  gap: 8px;
  flex-wrap: wrap;
}

.comment-img {
  width: 120px;  /* 图片宽度 */
  height: 120px; /* 图片高度 */
  object-fit: cover; /* 保持比例并裁剪 */
  border-radius: 4px;
  cursor: pointer;
  transition: transform 0.2s ease;
}

.comment-img:hover {
  transform: scale(1.03); /* 悬停时轻微放大 */
}

/* 操作链接样式 */
.comment-actions {
  margin-bottom: 8px;
  display: flex;
  gap: 16px;
}

.action-link {
  color: #666;
  cursor: pointer;
  font-size: 14px;
  transition: color 0.2s;
}

.action-link:hover {
  color: #007bff;
  text-decoration: underline;
}

.reply-link {
  color: #007bff;
}

.edit-link {
  color: #28a745;
}

.delete-link {
  color: #dc3545;
}

/* 子评论折叠控制 */
.toggle-children {
  color: #007bff;
  font-size: 14px;
  cursor: pointer;
  margin: 8px 0;
  display: inline-block;
}

.toggle-children:hover {
  text-decoration: underline;
}

/* 子评论样式 */
.comment-children {
  margin-left: 24px;
  margin-top: 16px;
  padding-top: 16px;
  border-top: 1px dashed #eee;
}

/* 响应式调整 */
@media (max-width: 768px) {
  .comment-img {
    width: 100px;  /* 小屏幕图片宽度 */
    height: 100px; /* 小屏幕图片高度 */
  }
}
</style>
